<template>
	<div class="login" v-loading.fullscreen.lock="fullscreenLoading">
		<el-row class="login-tabs">
			<el-button v-if="loginType !== 1" type="text" size="small" @click="loginType = 1">账密登录</el-button>
			<el-button v-if="loginType !== 2" type="text" size="small" @click="loginType = 2">手机登录</el-button>
		</el-row>
		<el-divider content-position="left"><i class="el-icon-key"></i> <span v-if="loginType == 1">账号密码登录</span><span
				v-if="loginType == 2">手机登录</span></el-divider>
		<el-form :label-position="labelPosition" label-width="80px" :model="LoginForm">
			<el-form-item label="账户">
				<el-input v-model="LoginForm.phoneNumber"></el-input>
			</el-form-item>
			<el-form-item v-if="loginType == 2" label="" class="login-submit">
				<el-button :disabled="edit" type="primary" size="small" @click="sendCode()">发送验证码</el-button>
			</el-form-item>
			<el-form-item v-if="loginType == 1" label="密码">
				<el-input type='password' v-model="LoginForm.password"></el-input>
			</el-form-item>
			<el-form-item v-if="loginType == 2" label="验证码">
				<el-input v-model="LoginForm.password"></el-input>
			</el-form-item>
		</el-form>
		<el-row class="login-submit">
			<el-button v-if="loginType == 1" type="text" @click="forgetPassword()" size="small">忘记密码?</el-button>
			<el-button type="text" size="small" @click="toRegister()">没有账号？去注册</el-button>
			<el-button type="primary" size="small" @click="login()">登录</el-button>
		</el-row>
		<el-divider></el-divider>
	</div>
</template>
<script>
	import bus from '../../utils/bus.js'
	import axios from 'axios'
	export default {
		name: "Login",
		components: {},
		data() {
			return {
				edit: false,
				fullscreenLoading: false,
				labelPosition: 'right',
				LoginForm: {
					phoneNumber: '',
					password: ''
				},
				loginType: 1
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			// 忘记密码
			forgetPassword() {
				bus.$emit('msg', 'forgetPassword')
				this.$router.push('/Register')
			},
			// 去注册
			toRegister() {
				bus.$emit('msg', 'Register')
				this.$router.push('/Register')
			},
			// 登录
			login() {
				let vm = this
				if (vm.loginType == 1) {
					// TODO 登录前验证
					axios({
						method: 'post',
						dataType: 'json',
						contentType: 'application/json;charset=UTF-8',
						url: vm.$dev.BASE_URL + '/user-info-service/userInfo/login',
						data: vm.LoginForm,
					}).then(function(res) {
						if (!res.data.success) {
							vm.$message.error(res.data.message);
						} else {
							vm.$message.success(res.data.message);
							// 把用户信息放到 cookie 中去
							console.log(res.data.data)
							vm.$cookie.set('nickName', res.data.data.userInfo.nickName, 7);
							vm.$cookie.set('phoneNumber', res.data.data.userInfo.phoneNumber, 7);
							vm.$cookie.set('id', res.data.data.userInfo.id, 7);
							// 跳转到首页
							vm.$router.push('/Index')
						}
					});
				} else {
					// TODO 登录前验证
					let codeLogin = {
						phoneNumber: vm.LoginForm.phoneNumber,
						code: vm.LoginForm.password
					};
					axios({
						method: 'post',
						dataType: 'json',
						contentType: 'application/json;charset=UTF-8',
						url: vm.$dev.BASE_URL + '/user-info-service/userInfo/codeLogin',
						data: codeLogin,
					}).then(function(res) {
						console.log(res)
						if (!res.data.success) {
							vm.$message.error(res.data.message);
						} else {
							vm.$message.success(res.data.message);
							// 把用户信息放到 cookie 中去
							console.log(res.data.data)
							vm.$cookie.set('nickName', res.data.data.userInfo.nickName, 7);
							vm.$cookie.set('phoneNumber', res.data.data.userInfo.phoneNumber, 7);
							vm.$cookie.set('id', res.data.data.userInfo.id, 7);
							// 跳转到首页
							vm.$router.push('/Index')
						}
					});
				}
			},
			sendCode() {
				let vm = this
				// 验证手机号
				let patternPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
				// 验证手机号的结果
				let resPhone = patternPhone.test(vm.LoginForm.phoneNumber)
				if (!resPhone) {
					vm.$message.error('请输入正确的手机号码');
					return;
				}
				vm.fullscreenLoading = true
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/message-service/message/getSmsCode/' + vm.LoginForm.phoneNumber,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
						vm.fullscreenLoading = false;
					} else {
						vm.$message.success(res.data.message);
						vm.fullscreenLoading = false;
						vm.edit = true
					}
				});
			}
		}
	}
</script>

<style>
	.login {
		text-align: center;
		width: 20%;
		margin-left: 40%;
		margin-top: 10%;
	}

	.login-tabs {
		text-align: left;
	}

	.login-submit {
		text-align: right;
	}
</style>
